import React from 'react'
import styles from './Product.css'
import Images from "../Images";
import ProductListPlus from "../ProductListPlus/ProductListPlus";
import ProductListDoubleList from "../ProductListDoubleList/ProductListDoubleList";
import SearchWindow from "../SearchWindow/SearchWindow";
import _ from 'lodash';
import {getProductLists} from "../../services/ProductService";

class Product extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      search_pl: '搜本店',
      classify: ['推荐', '销量', '价格', '筛选'],
      puoductLists: [
        {
          title: '法国进口葡萄酒',
          price: '469',
          comments: '222',
          nice: '96'
        },
        {
          title: '法国进口葡萄酒',
          price: '469',
          comments: '222',
          nice: '96'
        },
        {
          title: '法国进口葡萄酒',
          price: '469',
          comments: '222',
          nice: '96'
        }
      ],
      listsState: 'grade',
      searchRef: 'hidden'
    }
  }

  refHide = () => {
    this.setState({
      searchRef: 'hide'
    })
  }
  refShow = () => {
    this.setState({
      searchRef: 'show'
    })
  }

  render() {
    let iconback = _.get(Images, 'iconback')
    let iconsearch1 = _.get(Images, 'iconsearch1')
    let iconsearch2 = _.get(Images, 'iconsearch2')
    let search_pl = this.state.search_pl
    let listsState = this.state.listsState
    let searchRef = this.state.searchRef
    return (
      <div className={styles.container}>
        <div className={styles.main_wrap}>
          {
            searchRef == 'show' ? <SearchWindow refHide={this.refHide}></SearchWindow> : ''
          }
          <div className={styles.header}>
            <img className={styles.iocnback} src={iconback}/>
            <div className={styles.search_wrap}>
              <img className={styles.iconsearch1} src={iconsearch1}/>
              <input onFocus={this.refShow} className={styles.search_input} type="search"
                     placeholder={search_pl}/>
            </div>
            <div className={styles.sort_box}>
              <img className={styles.iconsearch2} src={iconsearch2}/>
              <span>分类</span>
            </div>
          </div>
          <div className={styles.classify_box}>
            <ul className={styles.s_ul}>
              {
                this.state.classify.map((item, i) => {
                  return (
                    <li className={styles.s_list} key={i}>{item}</li>
                  )
                })
              }
            </ul>
            <div onClick={() => {
              if (listsState == 'list') {
                this.setState({
                  listsState: 'grade'
                })
              } else {
                this.setState({
                  listsState: 'list'
                })
              }
            }} className={styles.s_list_last}><img className={styles.iconsearch2} src={iconsearch2}/></div>
          </div>
          <div className={styles.productLists}>
            {
              listsState == 'list' ? <ProductListPlus puoductLists={this.state.puoductLists}></ProductListPlus> :
                <ProductListDoubleList puoductLists={this.state.puoductLists}></ProductListDoubleList>
            }

          </div>
        </div>
      </div>
    )
  }

  componentWillMount() {
    // add event listeners (Flux Store, WebSocket, document, etc.)
    // getProductLists()
  }

  componentDidMount() {
    getProductLists()
      .then(result => {
        this.setState({
          puoductLists:result.phone_products
        })
      })
      .catch(error => {
      })
  }
}

export default Product
